<template>
<!-- 定义一个宽高的DOM -->
  <div ref='chart' style="width:100%;height:250px;"></div>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue'
import * as Charts from 'echarts'
import axios from 'axios'
export default {
setup(){
    const chart = ref()
    const data= reactive({
        tq1:[],
        tq2:[]
    })
    const getChartsData=()=>{
        axios('/charts').then(res=>{
            res.data.array1.forEach((item)=>{
                data.tq1.push(item)
            })
            res.data.array2.forEach((item)=>{
                data.tq2.push(item)
            })
            init()
        }).catch(err=>{
            console.log(err)
        })
    }
    onMounted(()=>{
        getChartsData()
    })
    function init() {
        var myChart = Charts.init(chart.value)
        var xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        var tq = [80, 120, 30, 49, 18, 90, 48, 39, 27, 49, 58, 20];
        var tq1 = data.tq1
        var tq2 = data.tq2
        var option = {
        backgroundColor: '#fff',
        title: {
            text: '月商品交易量',
            x: 'center',
            top: '15px',
            textStyle: {
                color: '#333333',
                fontWeight: 500,
                fontSize: 18,
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle: {
                color: '#fff',
            },
            formatter: function (params) {
                return (
                    params[0].name +
                    '<br/>' +
                    params[0].marker +
                    params[0].seriesName +
                    ' : ' +
                    params[0].value +
                    '<br/>' +
                    params[1].marker +
                    params[1].seriesName +
                    ' : ' +
                    params[1].value +
                    '%' +
                    '<br/>' +
                    params[2].marker +
                    params[2].seriesName +
                    ' : ' +
                    params[2].value +
                    '%'
                );
            },
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)',
                            },
                        ],
                        global: false,
                    },
                },
            },
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    show: false,
                    color: '#aaa',
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#aaa',
                    width: 100,
                },
                splitLine: {
                    show: false,
                },
                boundaryGap: false,
                data: xData,
            },
        ],

        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed', //虚线
                        color: '#00BFF3',
                        opacity: 0.23,
                    },
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: '#aaa',
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            {
                type: 'value',
                position: 'right',
                axisLabel: {
                    formatter: '{value}%', //使图变成百分比形式
                },
                splitLine: {
                    //网格线显不显示
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '本月销售额',
                type: 'bar',
                stack: '总值',
                barMaxWidth: 15,
                // barGap: "10%",
                data: tq.map((item) => {
                    return {
                        value: item,
                        itemStyle: {
                            normal: {
                                barBorderRadius: item > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], //左上角参数1, 右上角参数2, 右下角参数3, 左下角参数4
                                color: new Charts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: item > 0 ? '#956FD4' : '#64ccff',
                                    },
                                    {
                                        offset: 1,
                                        color: item > 0 ? '#64ccff' : '#956FD4',
                                    },
                                ]),
                            },
                        },
                    };
                }),
            },
            {
                name: '环比上月',
                type: 'line',
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: '#A582EA',
                    },
                },
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#A582EA',
                    },
                },
                itemStyle: {
                    color: '#fff',
                    borderColor: '#A582EA',
                    borderWidth: 2,
                },
                areaStyle: {
                    normal: {
                        color: new Charts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(145, 118, 215,0.5)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(145, 118, 215,0)',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: tq1, //data.values
            },
            {
                name: '同比上月',
                type: 'line',
                yAxisIndex: 1,
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: '#64ccff',
                    },
                },
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#64ccff',
                    },
                },
                itemStyle: {
                    color: '#fff',
                    borderColor: '#64ccff',
                    borderWidth: 2,
                },
                areaStyle: {
                    normal: {
                        color: new Charts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(102, 200, 253,0.5)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(81,150,164,0)',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: tq2, //data.values
            },
        ],
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.onresize = myChart.resize;
    }
    return{
        ...toRefs(data),
        chart
    }
}
}
</script>

<style>

</style>